 
<template>
  <div>
    <el-container :class="type === false ? 'drak' : 'light'">
      <el-aside class="aside" :width="iscollapse ? '60px' : '140px'">
        <Menu :type="type" :routerlist="routerlist" :iscollapse="iscollapse" />
      </el-aside>
      <el-container
        class="contain"
        :style="{ marginLeft: iscollapse ? '60px' : '140px' }"
      >
        <el-header>
          <el-row>
            <el-col :span="1">
              <b style="font-size: 30px">
                <el-icon color="#409EFF">
                  <Fold v-if="iscollapse" @click="close" />
                  <Expand v-else @click="close" />
                </el-icon>
              </b>
            </el-col>
            <el-col :span="8">
              <h1
                v-if="
                  routerlist.filter((v) => v.path === this.$route.path)
                    .length === 0
                "
              >
                {{ $route.path === "/user" ? "用户列表" : "角色列表" }}
              </h1>
              <h3 v-else>
                <el-breadcrumb
                  separator="/"
                  :style="{ fontSize: '17px', lineHeight: '53px' }"
                >
                  <el-breadcrumb-item> 首页 </el-breadcrumb-item>
                  <el-breadcrumb-item>
                    {{
                      routerlist.filter((v) => v.path === this.$route.path)[0]
                        .title
                    }}
                  </el-breadcrumb-item>
                </el-breadcrumb>
                <!-- -->
              </h3>
            </el-col>
            <el-col :span="14" class="admin">
              <el-switch
                v-model="type"
                size="large"
                active-icon="Sunny"
                inactive-icon="Moon"
                class="mt-2"
                style="margin-left: 24px"
                active-color="orange"
                inactive-color="plum"
                inline-prompt
                @change="
                  () => {
                    type === 'drak' ? 'drak' : 'light';
                  }
                "
              />
              {{ type === false ? "暗黑" : "白天" }}
              <img :src="token.url" />
              <!-- 下拉  -->
              <el-dropdown>
                <el-button link>
                  {{ token.user
                  }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="() => Out()"
                      >退出登录</el-dropdown-item
                    >
                    <el-dropdown-item command="b" @click="$router.push('/logo')"
                      >go home
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <el-main class="Container">
          <transition>
            <router-view :type1="type" />
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Menu from "../components/Menu.vue";

export default {
  components: { Menu, Header, Menu },
  data() {
    return {
      iscollapse: true,
      type: true,
      token: JSON.parse(localStorage.getItem("user")),
      routerlist: [
        {
          path: "/train",
          title: "车次管理",
          icon: <Document />,
        },
        {
          path: "/station",
          title: "车站管理",
          icon: <Ticket />,
        },
        {
          path: "/line",
          title: "线路管理",
          icon: <PieChart />,
        },
        {
          path: "/ticket",
          title: "车票管理",
          icon: <Position />,
        },
        {
          path: "/order",
          title: "订单管理",
          icon: <Finished />,
        },
        {
          path: "/personal",
          title: "个人轨迹监控",
          icon: <LocationInformation />,
        },
      ],
      a: "",
    };
  },
  methods: {
    close() {
      this.iscollapse = !this.iscollapse;
    },
    Out() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    getroute() {},
  },
  mounted() {},
};
</script>
<style  scoped lang="scss" >
.light {
  color: #000;
  width: 100%;
  height: 100%;
  .el-aside {
    background-color: #545c64 !important;
  }
  a {
    color: #000;
  }
  .el-container {
    background-color: #fff !important;
    // background-image: url("../assets/img/login.jpg");
    color: #000;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.drak {
  background-color: #545c64;
  color: #ffff;
  width: 100%;
  height: 100vh;

  a {
    color: #fff;
  }
  .el-container {
    background-color: #545c64;
    color: #ffff;
  }
  .el-header {
    background-color: #545c64;
  }
}
// 动画
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.el-aside {
  transition: 1s;
  text-align: center;
  overflow: hidden;
  height: 100vh;
  position: fixed;
  top: 0px;
  font-size: 30px;
}
.contain {
  transition: 1s;
  background-color: #f5f7fa;
  height: 100%;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.el-header {
  font-size: 23px;
  border-bottom: solid 1px #ebe9e9;
  line-height: 55px;
  width: 100%;
  z-index: 999;
  background-color: white;
  position: sticky;
  top: 0px;
  a {
    font-size: 18px;
    line-height: 50px;
    width: 85px;
    .el-icon--right {
      top: 4px;
      left: -3px;
    }
  }
  h3 {
    margin-top: -3px;
  }
  img {
    width: 50px;
    vertical-align: middle;
    height: 45px;
    margin-right: 10px;
  }
  .el-button {
    margin-top: 15px;
    color: #304156;
    font-size: 24px;
    height: 30px;
  }
  .admin {
    float: right;
    position: fixed;
    top: 0px;
    right: 10px;
    width: 300px;
  }
}
.el-icon {
  cursor: pointer;
}
.Container {
  margin: 10px auto;
  width: 95%;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  border: dashed 2px #ccc;
}
</style>
 